<template>
  <div class="forget-pwd-wrap">
    <div class="ms-title">
      <span style="font-size: 3vh;">危险化学品道路运输监管系统</span>
      <br >密码找回
    </div>
    <div class="ms-login">
      <el-form ref="forgetPwdForm" :model="forgetPwdForm" label-width="0px" @submit.native.prevent>
        <el-form-item
          :rules="$rulesFilter({required:true})"
          prop="userName">
          <el-input v-model="forgetPwdForm.userName" placeholder="请输入用户名" clearable @keyup.enter.native="submitForgetPwdForm">
            <template slot="prepend">用户名</template>
          </el-input>
        </el-form-item>
        <el-form-item
          :rules="$rulesFilter({required:true,type:'mobile'})"
          prop="mob">
          <el-input v-model="forgetPwdForm.mob" placeholder="请输入手机号码" clearable @keyup.enter.native="submitForgetPwdForm">
            <template slot="prepend">手机号</template>
          </el-input>
        </el-form-item>
        <el-form-item
          :rules="$rulesFilter({required:true})"
          prop="codeVal"
          class="code-wape">
          <el-input v-model="forgetPwdForm.codeVal" placeholder="请输入您收到的短信验证码" class="code-input" @keyup.enter.native="submitForgetPwdForm">
            <template slot="append">
              <el-button id="resentBtn" ref="resentBtn" :loading="resentBtnLoading" type="primary" @click.native="getMobCode">{{ resentBtnText }}</el-button>
            </template>
          </el-input>
        </el-form-item>
        <div class="forget-pwd-btn">
          <el-button :loading="loading" type="primary" @click="submitForgetPwdForm">找回密码</el-button>
        </div>
        <div class="link-a-wape">
          <!-- <a :href="toWelcomePage">返回平台首页</a> -->
          <svg-icon icon-class="weixin" class-name="link-svg-weixin"/> <a :href="weixinLoginUrl">微信登录</a>
        </div>
        <div class="rememberme-wape clearfix">
          <!-- <el-checkbox v-model="isRememberMe">记住我</el-checkbox> -->
          <router-link to="/signup" class="singup">注册申请</router-link>
          <router-link to="/login" class="forget-pwd">点击登录</router-link>
        </div>
      </el-form>
    </div>
    <div :style="{'top':msTipsTopValue+'px'}" class="ms-tips">温馨提示：平台支持Google Chrome版本和360浏览器（采用极速模式），建议推荐<a style="color:#c2c3c3;" href="https://www.google.cn/chrome/" target="_blank">谷歌浏览器</a>。</div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import * as Tool from '@/utils/tool'
import * as Validate from '@/utils/validate'
// import * as $http from '@/api/common'
import * as $httpCommon from '@/api/common'

export default {
  name: 'Login',
  data() {
    return {
      loading: false,
      msTipsTopValue: Tool.getClientHeight() * 0.25 + 380,
      forgetPwdForm: {
        userName: null,
        mob: null,
        codeVal: null
      },

      resentBtnText: '点击获取手机验证码',
      resentBtnLoading: false,
      timeoutInterval: null,	// 定时器
      countdown: 59,			// 重新发送倒计时

      baseAPI: process.env.BASE_API
    }
  },
  computed: {
    ...mapGetters([
      'ZJDCProjectRegions'
    ]),
    baseURL() {
      return this.baseAPI.replace('\/whjk', '')
    }
    // toWelcomePage() {
    //   const selectedRegion = Tool.getUrlRegion(this.ZJDCProjectRegions)
    //   return (this.baseURL + '/welcome/').replace('dcys', selectedRegion.urlValue)
    // }
  },
  mounted: function() {
    const _this = this
    window.addEventListener('resize', function() {
      _this.msTipsTopValue = Tool.getClientHeight() * 0.25 + 380
    })
  },
  methods: {
    // 获取手机验证码
    getMobCode() {
      const _this = this
      if (!this.forgetPwdForm.mob) {
        this.$message({
          showClose: true,
          message: '请先填写手机号',
          type: 'error'
        })
        return
      } else if (!Validate.isMobile(this.forgetPwdForm.mob)) {
        this.$message({
          showClose: true,
          message: '对不起，您填写的手机号不正确',
          type: 'error'
        })
        return
      }
      $httpCommon.getMobCode(this.forgetPwdForm.mob).then((response) => {
        if (response.code === 0) {
          this.$message({
            showClose: true,
            message: response.msg,
            type: 'success'
          })
          _this.resentBtnLoading = true
          _this.countdown = 60
          _this.timeoutInterval = setInterval(function() {
            _this.resentBtnHandle()
          }, 1000)
        } else {
          this.$message({
            showClose: true,
            message: '手机验证码发送失败：' + response.msg,
            type: 'error'
          })
        }
      }).catch((e) => {
        console.log(e)
      })
    },

    // 重置重新发送按钮
    resentBtnHandle() {
      if (this.countdown <= 0) {
        this.resentBtnText = '重新获取'
        this.resentBtnLoading = false
        window.clearInterval(this.timeoutInterval)
        this.countdown = 59
      } else {
        this.resentBtnLoading = true
        this.resentBtnText = '重新发送(' + this.countdown + '秒)'
        this.countdown--
      }
    },

    // 点击提交
    submitForgetPwdForm() {
      const _this = this
      this.$refs.forgetPwdForm.validate((valid) => {
        if (valid) {
          _this.loading = true
          $httpCommon.findLostPwd(_this.forgetPwdForm).then((res) => {
            this.loading = false
            if (res.code === 0) {
              this.$message({
                showClose: true,
                message: '尊敬的用户您好，您的新密码已发到您手机，请注意查收。登录成功后，可通过平台修改密码。',
                type: 'success',
                duration: 3000
              })
              _this.$refs.forgetPwdForm.resetFields()
            } else {
              this.$message({
                showClose: true,
                message: '密码获取失败：' + res.msg,
                type: 'error',
                duration: 3000
              })
            }
          }).catch(() => {
            _this.loading = false
          })
        } else {
          this.$message({
            showClose: true,
            message: '对不起，您填写的信息不正确',
            type: 'error'
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.forget-pwd-wrap {
	position: relative;
	width: 100%;
	height: 100vh;
	min-height:300px;
	overflow-y: auto;
	background-color: #f5f7f9;
	background-image: url();
	-moz-background-size: 100% 100%;
	background-size: 100% 100%;
}
.ms-title {
	position: absolute;
    top: 5vh;
    width: 100vw;
    text-align: center;
    font-size: 4vh;
	line-height: 6vh;
    color: #fff;
    font-weight: 500;

}
.ms-login {
	position: absolute;
	left: 50vw;
	top: 50vh;
	width: 390px;
	height: 330px;
	margin: 0;
	margin-left:-195px;
	margin-top: -25vh;
	padding: 40px;
	border-radius: 5px;
	background-color: rgba(255,255,255,0.8);
}
.code-image{
	height: 38px;
    width: 110px;
    line-height: 40px;
    display: inline-block;
    vertical-align: middle;
    padding: 0;
    margin: 0;
    cursor: pointer;
}
.forget-pwd-btn {
	text-align: center;
}
.forget-pwd-btn button {
	width: 100%;
	height: 36px;
}
.link-a-wape {
  text-align: left;
  font-size: 14px;
  padding: 5px;
}
.link-a-wape > a {
  color: #409eff;
  text-decoration: none;
  margin-right: 15px;
}
.link-a-wape > a:hover {
  color: #f40;
}
.link-a-wape > .link-svg-weixin {
  color: #51c332;
  font-size: 18px;
  margin-bottom: -2px;
  margin-right: 2px;
}
.singup{
	background-color: #d9534f;
	display: inline;
	float:right;
  padding: .2em .6em .3em;
  font-size: 75%;
  font-weight: bold;
  line-height: 1.5;
  color: #ffffff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
	border-radius: .25em;
	text-decoration: none;
}
.forget-pwd{
	display: inline;
  float: right;
  padding: .4em .6em .3em;
  font-size: 75%;
  line-height: 1.5;
  color: #6c6c6c;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  text-decoration: none;
}
.forget-pwd:hover{
	color:#f40;
}
.ms-tips{
	position: absolute;
	width: 100%;
	text-align: center;
    color: #c2c3c3;
    font-size: 13px;
}
</style>
